<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.绘制线条</title>
    <style>
        body>* {
            margin-left: 40px;
        }
        li{
            margin-bottom:  0.5em;
        }
        canvas{
            display: block;
        }
    </style>
</head>
<body>
<h4><a href="http://caibaojian.com/canvas/2.html">绘制线条以及上色</a></h4>
<canvas id="canvas">你的浏览器居然不支持Canvas？！赶快换一个吧！！</canvas>
<ol>
    <li>获取canvas对象。 getElementById()</li>
    <li>获取2d环境(画笔)。 getContext('2d') </li>
    <li>设置开始 beginPath()
        <br>
        设置路径点 moveto() lineTo()
        <br>
        闭合路径 closePath()
        <br>
        描边样式：宽 lineWith 、 颜色 strokeStyle
        <br>
        进行描边 stroke() </li>
    <li>设置新开始，......</li>
</ol>
<script>
    window.onload=function () {
        var cans= document.getElementById('canvas');
        cans.width=400;
        cans.height=400;
        cans.style.background='#eee';

        var context= cans.getContext('2d');

        //**开始新路径 / 绘制设置
        context.beginPath();
        context.moveTo(10,0);           //路径--起点
        context.lineTo(100,50);         //路径--下一个点
        context.lineTo(10,100);
        context.lineWidth=1;            //宽度-px
        context.strokeStyle='#333';    //颜色，stroke描边
        //**确认绘制：描边
        context.stroke();

        //------------------------------------------------------------------

        //**开始新路径 / 绘制设置
        context.beginPath();

        context.moveTo(110,0);          //路径--起点
        context.lineTo(200,50);         //路径--下一个点
        context.lineTo(110,100);
        //闭合路径--最后一笔可以不画
        // context.moveTo(110,0);
        context.closePath();
        //样式设置
        context.lineWidth=1;            //宽度-px
        context.strokeStyle='blue';     //颜色，stroke描边

        //**确认绘制：描边
        context.stroke();

    }
</script>
</body>
</html>